<template>
	<div>
		<van-row>
			<!-- 左侧分类 -->
			<van-col span="6">
				<van-sticky :offset-top="46">
					<van-sidebar v-model="activeKey">
						<van-sidebar-item v-for="(item,i) in categoryList" :title="item.name"
							@click="onClickLeftMenus(item.id)" />
					</van-sidebar>
				</van-sticky>
			</van-col>
			<!-- 右侧商品列表 -->
			<van-col span="18">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了"
					 @load="onLoad" :immediate-check="false">
						<!-- 商品卡片列表 -->
						<van-card v-for="(item,i) in productList" :key="i" :price="item.price" :desc="item.spec"
							:title="item.title" :thumb="APIDomainName + item.pic" @click="onDetail(item.id)">
						</van-card>
					</van-list>
				</van-pull-refresh>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	//导入封装后的接口
	import {
		getProductListAPI
	} from "@/api/product.js";
	import {
		getCategoryAPI
	} from "@/api/category.js"
	export default {
		data() {
			return {
				productList: [], //商品类别（指定分类id）
				categoryList: [], //分类列表
				category_id: null,
				//左侧导航栏变量
				activeKey: 0,
				//分页
				pageIndex: 0, //页码
				pageSize: 10, //页大小
				pageTotal: 0, //总页数
				//上拉加载状态控制变量
				// List有以下三种状态，理解这些状态有助于你正确地使用List组件：      
				// 非加载中，loading为false，此时会根据列表滚动位置判断是否触发onload事件（列表内容不足一屏幕时，会直接触发）。        
				// 加载中，loading为true，表示正在发送异步请求，此时不会触发onload事件。        
				// 加载完成，finished为true，此时不会触发onload事件 在每次请求完毕后，需要手动将loading设置为false，表示加载结束。
				loading: false,
				finished: false,
				//下拉刷新
				refreshing: false,
			}
		},
		//生命周期的钩子函数，当实例被创建好了后被调用
		created() {
			getCategoryAPI().then(result => {
				console.log(result); //调式输出，也可以看看数据结构
				this.categoryList = result.data;
				this.category_id = this.categoryList[0].id; //取分类列表中的第一个分类id
				this.onRefresh();
			});

		},
		methods: {
			/* //获取当前分类id的商品列表
			getProductList() {
				//使用封装后的接口
				getProductListAPI({
					category_id: this.category_id,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				}).then((result) => {
					console.log(result);
					this.productList = result.data
				});
			}, */
			// 单击左菜单中的某一项后，显示对应分类的商品列表
			onClickLeftMenus(category_id) {
				this.category_id = category_id; //更新分类id
				this.productList=[], //清空商品列表
				this.onRefresh(); //获取该分类id对应的所以商品
			},
			//上拉加载，每次加载一页
			onLoad() {
				this.pageIndex++; //页码递增
				getProductListAPI({
					category_id: this.category_id,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				}).then((result) => {
					console.log(result); //调式输出，看看数据结构
					this.pageTotal = result.pageTotal;
					if (this.refreshing) {
						this.productList = []; //商品列表清空
						this.refreshing = false;
					}
					if (result.data.length > 0) {
						this.productList = this.productList.concat(result.data); //数据拼接
					}
					//设置本次上拉加载状态结果
					this.loading = false;

					if (this.pageIndex >= this.pageTotal) {
						this.finished = true;
					}
				});
			},
			//下拉刷新 刷新当前分类的商品 从第一页开始
			onRefresh() {
				this.pageIndex=0; //重置页码
				this.finished = false; //重置上拉加载未完成
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},
			//点击右侧商品列表中的商品后导航到商品详情
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.van-sidebar {
		width: 100px;
	}

	.van-sidebar-item {
		padding: 10px;
	}

	.van-card {
		font-size: 14px;

		.van-card__content {
			justify-content: center;

			.van-card__price {
				color: red;
				font-weight: bold;
				text-align: right;
			}
		}
	}
</style>
